<template>
  <div>
    <h1>半场动画</h1>
    <button @click="go">动画</button>
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
    >
      <div id="ID" v-show="flag"></div>
    </transition>
  </div>
</template>
<!-- 可以在attribute中声明js钩子,比如完成半场动画 -->
<script>
export default {
  name: "Body",
  data() {
    return {
      flag: true,
    };
  },
  methods: {
    go() {
      this.flag = !this.flag;
    },
    // 接受一个形参 就是被修改的dom元素
    beforeEnter(el) {
      console.log(el);
      el.style.transform = "translate(0,0)";
      console.log(1);
    },
    enter(el, done) {
      el.offsetWidth;
      el.style.transform = "translate(200px,200px)";
      el.style.transition = "all .7s ease-in";
      console.log(el, done);
      console.log(2);
    },
    afterEnter(el) {
      this.flag = !this.flag;
      console.log(3);
    },
  },
};
</script>

<style>
#ID {
  width: 100px;
  height: 20px;
  background: greenyellow;
}
</style>